<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<%
		response.setHeader("Cache-Control", "no-store");
		response.setHeader("Pragrma", "no-cache");
		response.setDateHeader("Expires", 0);

		Long resid =request.getParameter("resid")!=null?Long.parseLong(request.getParameter("resid")):0;
	%>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<%@ include file="../include/taglib.jsp"%>
		<%@ include file="../include/common.jsp"%>
		<%@ include file="../include/table.jsp"%>
		<%@ include file="../include/jbox.jsp"%>
		<title>单个服务可用度分析</title>
		<link href="/bsm/style/default/bsm/tab.css" rel="stylesheet"
			type="text/css">
		<link href="/bsm/style/default/bsm/availability.css" rel="stylesheet"
			type="text/css">
				<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/jquery/jcarousellite_1.0.1.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/calendar/zh_CN_WdatePicker.js"></script>
	    <script type="text/javascript" >
	                 //普通分析选择周期
            function choicefixtime(type,value){
               var countScope = $('#'+type+'countScope');
               if(value==4){
				 countScope.show();
				 initDate(type);
			   }else{
				 countScope.hide();
			   }
             }
            //选择分析方式
            function choiceMode(type,value){
                var common=$("#"+type+"common");
                var compare=$("#"+type+"compare");
                 if(value==0){
                 //曲线图的情况
                    common.show();
                    compare.hide();
                 }else{
                   common.hide();
                   compare.show();
               
                 }
           }
           //日期选择事件
           function choiceDate(type,value){
               var yearSpan=$("#"+type+"yearSpan");
               var monthSpan=$("#"+type+"monthSpan");
               var daySpan=$("#"+type+"daySpan");
               if(value=="year"){
                  yearSpan.show();
                  monthSpan.show();
                  daySpan.hide();
               }
               if(value=="month"){
                  yearSpan.show();
                  monthSpan.show();
                  daySpan.hide();
               }
               if(value=="day"){
                  yearSpan.hide();
                  monthSpan.hide();
                  daySpan.show();
               }
           }
		  //初始化日期事件
          function initDate(type){
				var currentDate =new Date();
				var currentDateVal=currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate());
				if(type==""){
				   $('#beginDate').val(currentDateVal);
		 		   $('#endDate').val(currentDateVal);
				}
		 		$('#'+type+'dayDate').val(currentDateVal);
	       }
		 $(document).ready(function(){
		        //数据列表隐藏与显示
		     $("#dataList").toggle( function () {
		           $("#availabilityData").show();
		           $(this).addClass("DataListSelect"); 
		       }, function () { 
		             $("#availabilityData").hide();
		     });
		      //日汇聚和时汇聚事件
		     $("#dimension").change(function(){
                initDate();
             });
              //选择分析类型
             $("#choice").change(function(){
                choiceMode("",this.value);
             });
                //选择分析时间
             $("#choiceDate").change(function(){
                choiceDate("",this.value);
             });
             //选择相应时间分析时间
             $("#spreadchoiceDate").change(function(){
                choiceDate("spread",this.value);
             });
             //普通分析选择周期
             $("#fixtime").change(function(){
                 choicefixtime("",this.value);
             });
	       
	      //同比和环比分析查询
	     function compareData(){
	          var choiceDate=$("#choiceDate").val();
	          var beginDate;
	      if(choiceDate=="day"){
	         beginDate=$("#dayDate").val();
	      }else{
	         var year=$("#choiceYear").val();
	         var month=$("#choicemonth").val();
	         beginDate=year+"-"+month+"-01";
	      }
	       $.ajax({
	           type:"post",
	           url:"${pageContext.request.contextPath}/appview/res-analysis!queryResCompareProp.action",
	           data:"choiceType="+$("#choice").val()+"&beginDate="+beginDate+"&choiceDate="+choiceDate,
	           dataType: 'json',
	           success:function(data){
	             //曲线图
	             beginDateJson=data.beginDate;
	             endDateJson=data.endDate;
	             buildLine(data.lineData);
	     		 buildPieData(data.beginDate,data.endDate);
		         //方差同比和环比图
	             buildColumnData(data.beginDate,data.endDate);
	           }
	       });
	     }
	     
	    //构建方差同比与环比柱状图
	    function buildColumnData(beginDate,endDate){
	        var choiceDate=$("#choiceDate").val();
	        $.ajax({
	           type:"post",
	           url:"${pageContext.request.contextPath}/appview/res-analysis!queryPropertyVar.action",
	            data:"beginDate="+beginDate+"&choiceDate="+choiceDate,
	           dataType: 'json',
	           success:function(data){
	               buildColumnVar(data);
	           }
	       });
	    }
	      
	 // 构建响应时间饼状图Ajax
	  function buildPieData(beginDate,endDate){
	   var chartRef=getChartFromId("linearChartId");
	   var spaceNumberText=parseInt($("#spaceNumText").val());
	   spaceNumberText=3;
	   var spaceNumberArray= new Array();　//创建一个数组
	   if(chartRef!=null){
	    for(var i=1;i<=spaceNumberText;i++){
	        var pointerValue=chartRef.getData(i);
	        if(i==1){
	           spaceNumberArray[i-1]=i-1+"#"+pointerValue.toFixed(0);
	        }else{
	           spaceNumberArray[i-1]=(chartRef.getData(i-1)).toFixed(0)+"#"+pointerValue.toFixed(0);
	        }
	    }
	   }
	    $.ajax({
	           type:"post",
	           url:"${pageContext.request.contextPath}/appview/res-analysis!queryPropertyDistribution.action",
	           data:"beginDate="+beginDate+"&endDate="+endDate+"&spaceTime="+spaceNumberArray,
	           dataType: 'json',
	           success:function(data){
	               //饼状图
	               $("#choiceTimeSpan").show();
	               buildPie(data.pieData);
	               
	           }
	       });
	    }
	    
	     //构建的曲线图 undfend的情况未考虑
	  function buildLine(data){
	        var chartReference = FusionCharts.items["myChartId5"];
		    if(chartReference!=null){
		       	 chartReference.dispose()
		    }
	  	    var lineChart= new FusionCharts("${pageContext.request.contextPath}/resources/charts/MSLine.swf",
				    "myChartId5", "950", "355", "0", "0");
			lineChart.setJSONData(data); 
		    lineChart.render("chart1");
	  }
	  //构建方差的柱状图
	  function buildColumnVar(data){
	        var chartReference = FusionCharts.items["columnVarChart"];
		    if(chartReference!=null){
		       	 chartReference.dispose()
		    }else{
	  	    var columnChart= new FusionCharts("${pageContext.request.contextPath}/resources/charts/Column2D.swf",
				    "columnVarChart", "100%", "100%", "0", "0");
			columnChart.setJSONData(data); 
		    columnChart.render("columnChart");
		    }
	  }
	  //构建饼状图
	  function buildPie(data){
	        var chartReference = FusionCharts.items["myChartId6"];
		    if(chartReference!=null){
		       	 chartReference.dispose()
		    }
            var pieChart= new FusionCharts("${pageContext.request.contextPath}/resources/charts/Pie2D.swf",
				     "myChartId6", "100%", "100%", "0", "0");
			 pieChart.setJSONData(data); 
		     pieChart.render("resDataChart");
	  }
	  
	  //普通分析的查询
	  function buildResPropdata(dimen,timeSection,beginDate,endDate,tableid){
		var aoColumns="";
		if(dimen!=0){
		      aoColumns+="[{\"mDataProp\":\"time\",\"\":\"center\",\"bSortable\": \"false\"},";
			  aoColumns+="{\"mDataProp\":\"avg\"},";
			  aoColumns+="{\"mDataProp\":\"max\"},";
		      aoColumns+="{\"mDataProp\":\"min\"}]";
		}else{
		   var currentDate =new Date();
		   aoColumns+="[{\"mDataProp\":\"time\",\"\":\"center\",\"bSortable\": \"false\"},";
		   aoColumns+="{\"mDataProp\":\"data\"}]";
		   beginDate+=" 00";
		   endDate+=" "+add_zero(currentDate.getHours())+"";
		}
		 var json = eval('(' + aoColumns + ')');
		 $("#availabilityTable").dataTable(
					{
						"bProcessing" : true,
						"bServerSide" : true,
						"sServerMethod" : 'POST',
						"sAjaxSource" : '${pageContext.request.contextPath}/appview/res-analysis!queryResProp.action',
						"bPaginate" : true,
						"bSort" : true,
						"bJQueryUI":false,
						"bFilter" : false,
						"bDestroy" : true,
						"sPaginationType" : "full_numbers",
						"sDom" : 'rt <"bottom"flpi>',
		               	"iDisplayLength":10,
	                	"aLengthMenu": [[20, 50, 100], [20, 50,100]],
	                    "aoColumns":json,
						"oLanguage" : {
			 				"sLengthMenu": "每页 _MENU_ 条",
			 		 		"sZeroRecords": "没有找到记录",
							"sInfo": "当前从 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", 
							"sInfoEmpty": "",
							"oPaginate":{"sFirst":"首页","sPrevious":"上一页","sNext":"下一页","sLast":"尾页"}	
						},
						"fnServerParams":function(aoData){
							aoData.push({'name':'resId','value':'<%=resid %>'});
							aoData.push({'name':'propId','value':''});
							aoData.push({'name':'dimen','value':dimen});
							aoData.push({'name':'timeSection','value':timeSection});
							aoData.push({'name':'beginDate','value':beginDate});
							aoData.push({'name':'endDate','value':endDate});
						},
						"fnInitComplete":function(oSettings){
							   $('#saveBt').attr("disabled", false).text("查询");
	                            var json=$.parseJSON(oSettings.jqXHR.responseText);
							     //曲线图
	                            buildLine(json.lineData);
	                            //饼状图
	                            //beginDateJson=json.beginDate;
	                              //endDateJson=json.endDate;
	                              		   //响应分布图
		                        //buildPieData(json.beginDate,json.endDate);
		                        //方差同比和环比图
	                            //buildColumnData(json.beginDate,json.endDate);
						}
					});
		  }
		  	     buildLinear("3");
		  
		 $("#spreadseacheBtn").click(function(){
	
		     buildPieData("","");
		                        //方差同比和环比图
	        buildColumnData("","");
		 });
		  
		  		//查询
		$("#seacheBtn").click(function(){
		   //数据维度
		  var dimen = $('#dimension').find('option:selected').val();
		  var beginDate = '';//$('#beginDate').val();
		  var endDate = '';//$('#endDate').val();
		   //时间区间
		   var timeSection = $('#fixtime').attr('value');
		   if(timeSection ==4){
				beginDate = $('#beginDate').val();
				endDate=$('#endDate').val();
		   }
		   //处理曲线图
		   var choice=$("#choice").val();
		   //普通分析
		   if(choice=="0"){
		       buildResPropdata(dimen,timeSection,beginDate,endDate,"resanalysisdata");
		   }else{
		      //同比和环比
		      compareData()
		   }
		});	
		
		//构建分布时间调动的图
	   function buildLinear(spaceNumText){
	     var dataString ='<chart manageResize=\"1\" origW=\"320\" oriH=\"50\" chartRightMargin=\"25\"  editMode=\"1\" bgAlpha=\"0\" showBorder=\"0\"';
	        dataString+=' upperLimit=\"1000\" lowerLimit=\"0\" numberPrefix=\"毫秒\" gaugeRoundRadius=\"5\"  ticksBelowGauge=\"0\" placeTicksInside=\"0\" showGaugeLabels=\"0\" pointerOnTop=\"1\" pointerRadius=\"14\"   majorTMThickness=\"2\" pointerBgAlpha=\"0\" pointerBorderThickness=\"2\" pointerBorderColor=\"e6eeb2\" pointerBgColor=\"ff0000\"  majorTMNumber=\"0\" minorTMNumber=\"0\" showToolTip=\"0\" forceDecimals=\"0\" formatNumberScale=\"0\" decimals=\"0\"  bgColor=\"ffffff\" canvasBgAlpha=\"50\" showBorder=\"0\">';
            dataString+='<colorRange>';
            dataString+='<color minValue=\"0\" maxValue=\"1000\" code=\"e0ddfb\" />';
            dataString+='</colorRange>';
	        dataString+='<pointers>';
	        for(var i=1;i<=spaceNumText;i++){
	             dataString+='<pointer value=\"';
	             dataString+=100*i;
	             dataString+='\"/>'
	        }
	        dataString+='</pointers>';
            dataString+='<styles>';
            dataString+='<definition>';
            dataString+='<style name=\"ValueFont\" type=\"Font\" bgColor=\"ffffff\" size=\"10\" color=\"000000\"/>';
            dataString+='<style name=\"RectShadow\" type=\"Shadow\" strength=\"3\"/>';
            dataString+='</definition>';
            dataString+='<application>';
            dataString+='<apply toObject=\"VALUE\" styles=\"valueFont\"/>';
            dataString+='<apply toObject=\"Grp1\" styles=\"RectShadow\" />';
            dataString+='</application>';
            dataString+='</styles>';
            dataString+='</chart>';
            //暂时 每一次创建一次 这代码不符合规范
		    var chartReference = FusionCharts.items["linearChartId"];
		    if(chartReference!=null){
		       	 chartReference.dispose()
		    }
            linearChartId=new FusionCharts("${pageContext.request.contextPath}/resources/charts/HLinearGauge.swf",
				"linearChartId", "450", "50", "0", "0");
			linearChartId.setXMLData(dataString); 
		    linearChartId.render("linearChart");
	     }
		
	    
	   
		    });
		</script>

	</head>
	<body>
		<!--标题-->
		<h2 class="availability-h2">
			xxx服务可用度分析
		</h2>
		<!--@end标题-->
		<div class="max">
			<div class="Analysis">
				<h3>
					响应时间分析
				</h3>
				<!--查询区-->
				<div class="searchFormStyle" id="searchParameter">
                   <span style="float: left">
	                 <label >分析方式：</label>
	                 <select id="choice" name="choice" class="select">  
    			          <option value="0" selected="selected">普通分析 </option>
    			          <option value="1" >同比分析</option>
    			          <option value="2" >环比分析</option>
    		          </select>
	               </span>
	              <span style="float: left;">
  		             <label >分析类型：</label>
  			         <select id="choiceType" name="choiceType" class="select">  
    			         <option value="1" >可用状态 </option>
    			         <option value="2" >响应时长</option>
    		         </select>
    	           </span>
    	    <span style="float: left;display: none" id="compare">
	               <span style="float: left;">
	               <label>时间类型：</label>
	                  <select id="choiceDate" name="choiceDate" class="select">  
    			      <option value="month" selected="selected">年</option>
    			      <option value="month">月</option>
    			      <option value="day" >日</option>
    		       </select>
    	         </span>
    	   <span style="float: left;" id="yearSpan">
	               <label>年</label>
	          <select id="choiceYear" name="choiceYear" class="select"> 
	          <c:forEach items="${yearList}" var="year">
    		  <option value="${year}">${year}</option>
    		  </c:forEach> 
    	   </select>
    	   </span>
    	    <span style="float: left;" id="monthSpan">
	              <label>月</label>
	          <select id="choicemonth" name="choicemonth" class="select">
	            <c:forEach items="${monthList}" var="month">
    			<option value="${ month}">${ month}</option>
    			</c:forEach>
    		</select>
    	   </span>
    	  <span style="float: left;display: none" id="daySpan" >
	              <label>日</label>
	             <input id="dayDate" name="dayDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',readOnly:true})"/>
    	   </span>
    	   </span>
    	    <span style="float: left;" id="common">
  		       <span style="float: left;">
  		       <label >数据维度：</label>
  			   <select id="dimension" name="dimension" class="select">  
    			<option value="1" >时汇聚数据 </option>
    			<option value="2" >日汇聚数据</option>
    		   </select>
    	    </span>
    	    <span style="float: left;">
	           <label >时间范围：</label>
	           <select id="fixtime" name="fixtime">
                  <option value="0" >今天 </option>
			      <option value="1" >昨天 </option>
			      <option value="2" >本周  </option>
			      <option value="3" >本月 </option>
			      <option value="4" >自定义 </option>
	           </select>
   		    </span>
   		   <span style="float: left;display: none;" id="countScope">
		      <label >统计范围：</label>
		      <span id="houseData">
		   				 <input id="beginDate" name="beginDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',readOnly:true})"/>
						 <label>-</label>
						 <input id="endDate" name="endDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',minDate:$('#beginDate').val(),readOnly:true})"/>
   		      </span>
	       </span>
	       </span>
	       <input type="button" value="查询" class="searchFormButtonStyle" id="seacheBtn"/>
		   </div>
				<!--@end查询区-->
				<div class="Curve">

					<!--数据列表-->
					<div class="DataList" id="dataList"></div>
					<!--@end数据列表-->

					<!--曲线图-->
					<div class="Graph">
						   <div id="chart1" style="float:left;">
			            </div>
					</div>
		         <div id="availabilityData" class="resable">
	 	             <table cellpadding="0" cellspacing="0" border="0" class="display" id="availabilityTable" width="100%">
				        <thead>
					     <tr>
						   <th width="5%">时间</th>
						   <th width="4%">Avg</th>
						   <th width="4%">Max</th>
						   <th width="4%">Min</th>
					     </tr>
				        </thead>
		             </table>
	              </div>	
					<!--@end曲线图-->
				</div>
			</div>

			<div class="Distributed">
				<h3>
					响应时间分布
				</h3>
				<!--查询区-->			
				<div class="searchFormStyle" id="searchSpread">
	             <span style="float: left;">
  		             <label >分析类型：</label>
  			         <select id="spreadchoiceType" name="spreadchoiceType" class="select">  
    			         <option value="1" >可用状态 </option>
    			         <option value="2" >响应时长</option>
    		         </select>
    	           </span>
    	       <span style="float: left" id="spreadcompare">
	               <span style="float: left;">
	               <label>时间类型：</label>
	                  <select id="spreadchoiceDate" name="spreadchoiceDate" class="select">  
    			      <option value="month" selected="selected">年</option>
    			      <option value="month">月</option>
    			      <option value="day" >日</option>
    		       </select>
    	         </span>
    	   <span style="float: left;" id="spreadyearSpan">
	               <label>年</label>
	          <select id="spreadchoiceYear" name="spreadchoiceYear" class="select"> 
	          <c:forEach items="${yearList}" var="year">
    		  <option value="${year}">${year}</option>
    		  </c:forEach> 
    	   </select>
    	   </span>
    	    <span style="float: left;" id="spreadmonthSpan">
	              <label>月</label>
	          <select id="spreadchoicemonth" name="spreadchoicemonth" class="select">
	            <c:forEach items="${monthList}" var="month">
    			<option value="${ month}">${ month}</option>
    			</c:forEach>
    		</select>
    	   </span>
    	  <span style="float: left;display: none" id="spreaddaySpan" >
	              <label>日</label>
	             <input id="spreaddayDate" name="spreaddayDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',readOnly:true})"/>
    	   </span>
    	   </span>
	       <input type="button" value="查询" class="searchFormButtonStyle" id="spreadseacheBtn"/>
	       </div>
				<!--@end查询区-->
				<div class="Chart">

					<!--饼图-->
					<div class="Pie">
					    <div id="linearChart">
		                </div>
		            	<div id="resDataChart" >
				        </div>
					</div>
					<!--@end饼图-->

					<!--柱图-->
					<div class="Histogram">
						        <div id="columnChart">
				</div>
					</div>
					<!--@end柱图-->
				</div>
			</div>
		</div>
	</body>
</html>